<template>
  <view class="video-waterfall">
    <!-- 列表区域 -->
    <view id="left-column" class="u-column">
      <view v-for="(it, ix) in leftList" :key="ix" class="column-item" @click="goDetail(it)">
        <!-- ?x-oss-process=image/resize,w_270 OSS1.5倍图-->
        <image :src="it.thumbnail+'?x-oss-process=image/resize,w_270'" lazy-load mode="widthFix" class="cover-image" />
        <view class="content-wrap">
          <view class="content-title">{{it.title||it.content}}</view>
          <view class="u-flex user-wrap">
            <image
                :src="it.communityLogo||'https://image.qqpyyds.com/mpAppImg/icon/avatar2_icon.png'"
                mode="aspectFill"
                class="avatar"
            />
            <text class="name">{{it.communityName}}</text>
          </view>
        </view>
        <!-- 视频播放按钮 -->
        <image v-if="it.mediaType===2" src="https://image.qqpyyds.com/mpAppImg/icon/video-player-icon1.png" class="player-icon" />
      </view>
    </view>
    <view id="right-column" class="u-column">
      <view v-for="(it, ix) in rightList" :key="ix" class="column-item" @click="goDetail(it)">
        <image :src="it.thumbnail+'?x-oss-process=image/resize,w_270'" lazy-load mode="widthFix" class="cover-image" />
        <view class="content-wrap">
          <view class="content-title">{{it.title||it.content}}</view>
          <view class="u-flex user-wrap">
            <image
                :src="it.communityLogo||'https://image.qqpyyds.com/mpAppImg/icon/avatar2_icon.png'"
                mode="aspectFill"
                class="avatar"
            />
            <text class="name">{{it.communityName}}</text>
          </view>
        </view>
        <!-- 视频播放按钮 -->
        <image v-if="it.mediaType===2" src="https://image.qqpyyds.com/mpAppImg/icon/video-player-icon1.png" class="player-icon" />
      </view>
    </view>
  </view>
</template>

<script>
import { isArray } from '@/utils/is'
export default {
  name: 'waterfall',
  props: {
    // 瀑布流数据
    value: {
      type: Array,
      required: true,
      default: () => []
    },
    // 每次向结构插入数据的时间间隔，间隔越长，越能保证两列高度相近，但是对用户体验越不好
    // 单位ms
    addTime: {
      type: [Number, String],
      default: 0
    },
  },
  watch: {
    copyFlowList(nVal, oVal) {
      // 取差值，即数组有变化新增的部分
      const startIndex = isArray(oVal) && oVal.length > 0 ? oVal.length : 0
      // 拼接上原有数据
      this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)))
      this.splitData()
    }
  },
  computed: {
    // 破坏瀑布流数据list变量的应用，否则watch的结果新旧值是一样的
    copyFlowList() {
      return this.cloneData(this.value)
    }
  },
  data() {
    return {
      leftList: [], // 左侧瀑布流列表
      rightList: [], // 右侧瀑布流列表
      tempList: [], // 中间变量列表
    }
  },
  mounted() {
    this.tempList = this.cloneData(this.copyFlowList)
    this.splitData()
  },
  methods: {
    async splitData() {
      if (!this.tempList.length) return

      const leftRect = await this.$uGetRect('#left-column')
      const rightRect = await this.$uGetRect('#right-column')

      // 若左边小于或等于右边，就添加到左边，否则添加到右边
      const item = this.tempList[0]
      if (!item) return

      if (leftRect.height < rightRect.height) {
        this.leftList.push(item)
      } else if (leftRect.height > rightRect.height) {
        this.rightList.push(item)
      } else {
        // 第一、第二张添加时，保证左右都有内容
        if (this.leftList.length <= this.rightList.length) {
          this.leftList.push(item)
        } else {
          this.rightList.push(item)
        }
      }

      // 移除临时列表的第一项
      this.tempList.splice(0, 1)
      // 若临时数组还有数据，继续循环
      if (this.tempList.length) {
        setTimeout(() => {
          this.splitData()
        }, parseInt(this.addTime))
      }
    },
    // 深复制--避免引用对象和数组
    cloneData(data) {
      return JSON.parse(JSON.stringify(data))
    },
    // 清空数据列表
    clear() {
      this.leftList = []
      this.rightList = []
      // 同时清除父组件列表中的数据
      this.$emit('input', [])
      this.tempList = []
    },
    goDetail(row) {
      this.navigateTo({url: `/pagesB/dynamic/${row.mediaType && row.mediaType === 1 ? 'graphicsDetail' : 'videoDetail'}?dynamicId=${row.dynamicId}&type=1`})
    }
  }
}
</script>

<style lang="scss" scoped>
.video-waterfall {
  display: flex;
  align-items: flex-start;
  padding: 8rpx 4rpx 0;
  height: 100%;
  .u-column {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0 4rpx;
  }
  .column-item {
    position: relative;
    height: auto;
    margin-bottom: 8rpx;
    border-radius: 16rpx;
    overflow: hidden;
    background-color: #FFFFFF;
  }
  .cover-image {
    display: block;
    width: 100%;
    min-height: 204rpx;
    border-radius: 16rpx;
  }
  .content-wrap {
    padding: 16rpx 16rpx 32rpx;
  }
  .content-title {
    margin-bottom: 16rpx;
    font-size: 28rpx;
    line-height: 36rpx;
    @include bov(2);
    color: $n8Color;
  }
  .avatar {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    margin-right: 16rpx;
  }
  .name {
    flex: 1;
    font-size: 24rpx;
    line-height: 32rpx;
    @include bov(1);
    color: $n7Color;
  }
  .player-icon {
    position: absolute;
    right: 16rpx;
    top: 16rpx;
    width: 56rpx;
    height: 56rpx;
  }
}
</style>
